<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3dtiles</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add()" class="btn">创建对象</div>
      <div onclick="clearLayer()" class="btn">清除图层</div>
    </div>

    <script type="text/javascript">
      const url = 'http://127.0.0.1:8072/%E9%A6%99%E6%B8%AF%E5%B2%9B%E5%BB%BA%E7%AD%91/tileset.json'
      const add = async () => {
        fdapi.cesium3DTileset.clear()
        let o = {
          id: 'fd1',
          offset: [0, 0, 0], //偏移
          tileURL: url //cesium3DTileset服务地址
        }

        await fdapi.cesium3DTileset.add(o)
      }

      const clearLayer = () => {
        fdapi.cesium3DTileset.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onEvent: function (event) {
              const eventType = event.eventtype
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
